<!doctype html>
<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
		<link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
		<link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="../assets/css/my-code.css">
		<link href="../assets/css/common-style.css" rel="stylesheet" type="text/css" />
		<link href="../assets/css/basicData.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="../assets/js/bui-min.js"></script>
		<script type="text/javascript" src="../assets/js/config-min.js"></script>
		<title>省市区管理</title>
	</head>

	<body>
		<div class="container">
			<div class="regionManagementTitle">
				<i class="icon icon-cog"></i> 区域维护
			</div>
			<div class="row">
				<div class="span24">
					<div>
						<div>
							<div id="tbar" class="area-button"></div>
						</div>
						<div id="area-tree"></div>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			BUI.use(['bui/tree', 'bui/data', 'bui/toolbar', 'bui/editor'],function(Tree, Data, Toolbar, Editor) {
					var treestore = new Data.TreeStore({
			            root: {
							id: '0',
							text: '全国',
							expanded: true,
						},
			            pidField : 'id',
			            url : '../data/provincialUrbanManagement.json',
			            autoLoad : true,
			        });
					var tree = new Tree.TreeList({
						render: '#area-tree',
						showLine: true,
						dirCls : 'icon-empty',
				        leafCls : 'icon icon-tree-list',
						store : treestore,
						showRoot : true
					});
					tree.render();
					
					//默认选中全国
					setTimeout(function(){
						tree.setSelectedByField('0');
					},300)
  					
        			
        			//tree点击事件
					tree.on('itemclick',function(ev){
				        var item = ev.item;
				        $(".button-box").removeClass("disableBtn");
				        if(item.level==0){
				        	$(".addProvince").show();
				        	$(".addCity").hide();
				        	$(".addCounty").hide();
				        }else if(item.level==1){
				        	$(".addCity").show();
				        	$(".addProvince").hide();
				        	$(".addCounty").hide();
				        }else if(item.level==2){
				        	$(".addCounty").show();
				        	$(".addProvince").hide();
				        	$(".addCity").hide();
				        }else{
				        	$(".button-box").addClass("disableBtn");
				        }
				    });
				    
					var store = tree.get('store'),
						editor = new Editor.Editor({
							field: { //设置编辑的字段
								rules: {
									required: true
								}
							},
							autoUpdate: false, //不自动更新对应DOM的文本，而使用store更新数据
							changeSourceEvent: null
						});
					editor.render();

					editor.on('accept', function() {
						var text = editor.getValue(),
							node = editor.get('curNode');
						node.text = text;
						store.update(node);
					});

					//显示编辑器
					function showEditor(node) {
						var element = tree.findElement(node);
						editor.setValue(node.text);

						editor.set('curNode', node); //缓存当前编辑的记录
						editor.set('align', { //设置对齐
							node: $(element).find('.x-tree-icon-wraper'),
							points: ['tr', 'tl']
						});
						editor.show();
						editor.focus(); //获取焦点
					}

					var bar = new Toolbar.Bar({
						render: '#tbar',
						elCls: 'button-box',
						children: [{
							elCls: 'button-green button-list addProvince',
							content: '添加省份 <i class="icon icon-plus icon-white">',
							handler: function() {
								var selectedNode = tree.getSelected(),
									newNode = {
										text: '新增省份'
									};
								newNode = store.add(newNode, selectedNode);
								tree.expandNode(selectedNode);
								showEditor(newNode);
							}
						}, {
							elCls: 'button-green button-list addCity',
							content: '添加地市 <i class="icon icon-plus icon-white">',
							handler: function() {
								var selectedNode = tree.getSelected(),
									newNode = {
										text: '新增地市'
									};
								newNode = store.add(newNode, selectedNode);
								tree.expandNode(selectedNode);
								showEditor(newNode);
							}
						}, {
							elCls: 'button-green button-list addCounty',
							content: '添加区县 <i class="icon icon-plus icon-white">',
							handler: function() {
								var selectedNode = tree.getSelected(),
									newNode = {
										text: '新增区县'
									};
								newNode = store.add(newNode, selectedNode);
								tree.expandNode(selectedNode);
								showEditor(newNode);
							}
						}]
					});
					bar.render();
				});
		</script>
	</body>

</html>